<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>产品保质期设置</title>
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap3.4.1.min.css" th:href="@{/css/lib/bootstrap3.4.1.min.css}">
    <!-- Bootstrap-table CSS-->
    <link rel="stylesheet" href="../../static/css/lib/bootstrap-table.min.css" th:href="@{/css/lib/bootstrap-table.min.css}">
    <!-- jquery-ui CSS-->
    <link rel="stylesheet" href="../../static/css/lib/jquery-ui.min.css" th:href="@{/css/lib/jquery-ui.min.css}">
    <!-- select2 CSS-->
    <link rel="stylesheet" href="../../static/css/lib/select2.min.css" th:href="@{/css/lib/select2.min.css}">
    <link rel="stylesheet" href="../../static/css/lib/select2-bootstrap.min.css" th:href="@{/css/lib/select2-bootstrap.min.css}">
    <link href="../../static/css/file.css" rel="stylesheet" th:href="@{/css/file.css}">
    <link href="../../static/css/table.css" rel="stylesheet" th:href="@{/css/table.css}">
</head>

<body onload="init();">

    <div class="panel-body" style="padding-bottom:0;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <div class="form-group" style="margin-top:15px">
                    <label class="control-label col-sm-1 label-font" for="txt_search_item_name">品名</label>
                    <div class="col-sm-1">
                        <input type="text" class="form-control" id="txt_search_item_name">
                    </div>

                    <label class="control-label col-sm-1 label-font" for="txt_search_product_number">产品号</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="txt_search_product_number">
                    </div>

                    <label class="control-label col-sm-1 label-font" for="txt_search_spec">规格</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control" id="txt_search_spec">
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_filter" class="btn btn-primary" onclick="filter();">过滤</button>
                        <button type="button" style="margin-left:50px" id="btn_reset_filter" class="btn btn-primary" onclick="init();">重置过滤</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal" onclick="">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>产品保质期设置
            </button>
        </div>
        <table id="table"></table>
    </div>

    <!-- 模态框（Modal）查看-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        查看产品保质期设置信息
                    </h4>
                </div>
                <div class="modal-body">
                    <table class="table">
                        <caption>产品保质期设置信息</caption>
                        <tbody>
                        <tr>
                            <td>品名</td>
                            <td id="td_item_name">xxx</td>
                        </tr>
                        <tr>
                            <td>规格</td>
                            <td id="td_spec">xxx</td>
                        </tr>
                        <tr>
                            <td>产品号</td>
                            <td id="td_product_number">xxx</td>
                        </tr>
                        <tr>
                            <td>单位</td>
                            <td id="td_unit">xxx</td>
                        </tr>
                        <tr>
                            <td>保质期</td>
                            <td id="td_expiry_date">xxx</td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td id="td_remark">xxx</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!--模态框（Modal） 新增-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="min-width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title text-center" id="addModalLabel">
                        添加保质期设置
                    </h2>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" onsubmit="return false;">

                        <div class="form-group has-error">
                            <label class="col-sm-2 control-label label-font" for="original_product_select">产品信息</label>
                            <div class="col-sm-10">
                                <select class="js-data-example-ajax form-control" id="original_product_select"  onchange="originalProductSelectChange();">
                                </select>
                            </div>
                        </div>

                        <div class="form-group has-error">
                            <label class="col-sm-2 control-label label-font" for="txt_expiry_date">保质期</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="txt_expiry_date" title="天" onchange="addExpiryDateInputChange();">
                            </div>
                        </div>

                        <div class="form-group has-success">
                            <label class="col-sm-2 control-label label-font" for="txt_remark">备注</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="6" id="txt_remark"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" onclick="addMsg()">增加</button>
                </div>
            </div> <!--/.modal-content -->
        </div><!--/.modal-->
    </div>

    <!--模态框（Modal） 编辑-->
    <div class="modal fade" id="alterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="min-width: 800px">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title text-center" id="alterModalLabel">
                        编辑保质期设置
                    </h2>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form" onsubmit="return false;">

                        <div class="form-group has-success">
                            <label class="col-sm-2 control-label label-font" for="alter_original_product_select">产品信息</label>
                            <div class="col-sm-10">
                                <select class="js-data-example-ajax form-control" id="alter_original_product_select"  onchange="alterOriginalProductSelectChange();">
                                </select>
                            </div>
                        </div>

                        <div class="form-group has-success">
                            <label class="col-sm-2 control-label label-font" for="alter_expiry_date">保质期</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="alter_expiry_date" title="天" onchange="alterExpiryDateInputChange();">
                            </div>
                        </div>

                        <div class="form-group has-success">
                            <label class="col-sm-2 control-label label-font" for="alter_remark">备注</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="6" id="alter_remark"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="alter()">编辑</button>
                </div>
            </div> <!--/.modal-content -->
        </div><!--/.modal-->
    </div>

<!-- JavaScript files-->
<!-- jquery.js -->
<script src="../../static/js/lib/jquery.min.js" th:src="@{/js/lib/jquery.min.js}"></script>
<!-- Bootstrap.js -->
<script src="../../static/js/lib/bootstrap3.4.1.min.js" th:src="@{/js/lib/bootstrap3.4.1.min.js}"></script>
<!-- Bootstrap-table.js -->
<script src="../../static/js/lib/bootstrap-table.min.js" th:src="@{/js/lib/bootstrap-table.min.js}"></script>
<script src="../../static/js/lib/bootstrap-table-zh-CN.min.js" th:src="@{/js/lib/bootstrap-table-zh-CN.min.js}"></script>
<!-- sweetalert2.js -->
<script src="../../static/js/lib/sweetalert.min.js" th:src="@{/js/lib/sweetalert.min.js}"></script>
<script src="../../static/js/lib/es6-promise.auto.min.js" th:src="@{/js/lib/es6-promise.auto.min.js}"></script>
<!-- jquery-ui.js -->
<script src="../../static/js/lib/jquery-ui.min.js" th:src="@{/js/lib/jquery-ui.min.js}"></script>
<!-- select2.js -->
<script src="../../static/js/lib/select2.min.js" th:src="@{/js/lib/select2.min.js}"></script>
<script src="../../static/js/lib/Select2-zh-CN.js" th:src="@{/js/lib/Select2-zh-CN.js}"></script>
<script src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
<script src="../../static/js/dragModel.js" th:src="@{/js/dragModel.js}"></script>

<script>
    /** 初始化 */
    let $table = $('#table');
    let $originalProductSelect = $("#original_product_select");
    let $alterOriginalProductSelect = $("#alter_original_product_select");

    // 服务器分页获取数据
    function getServerPaging(node, url, queryParams) {
        initTable(node, url, [10, 20, 30, 40, 50, 60, "All"], queryParams, [{
            checkbox: true
        }, {
            field: 'itemName',
            title: '品名',
            width: '90px',
            formatter: stringFormatter
        }, {
            field: 'spec',
            title: '规格',
            width: '170px',
            formatter: stringFormatter
        }, {
            field: 'productNumber',
            title: '产品号',
            width: '90px',
            formatter: stringFormatter
        }, {
            field:'unit',
            title: '单位',
            width: '90px',
            formatter: stringFormatter
        }, {
            field:'expiryDate',
            title: '保质期',
            width: '90px',
            formatter: stringFormatter
        }, {
            field:'createTime',
            title: '录入日期',
            width: '170px',
            formatter: dateFormatter
        }, {
            field:'remark',
            title: '备注',
            width: '170px',
            formatter: stringFormatter
        }, {
            field: 'operation',
            title: '操作',
            width: '257px',
            formatter: operateFormatter // 自定义方法，添加操作按钮
        }]);
    }

    function operateFormatter(value, row, index) {  // 赋予的参数
        return [
            '<button class="btn btn-success view" data-toggle="modal" data-target="#myModal" onclick="view('+ index +');">查看</button>&nbsp;&nbsp;'+
            '<button class="btn btn-primary view" data-toggle="modal" data-target="#alterModal" onclick="initAlter('+ index +');">编辑</button>&nbsp;&nbsp;'+
            '<button class="btn btn-danger view"  onclick="deleteAll('+ index +');">删除</button>'
        ].join('');
    }

    dragTheModalDialog();

    changeToolTip();

    // 初始化新增下拉框
    initSelect($originalProductSelect, "请输入原始成品规格", oriProductFormatter, "/original-information-of-finished-product/getOriginalProduct", 1000, params => {
        return { offset: params.page ? 10 * (params.page - 1) : 0, limit: 10, spec: params.term };
    }, result => result.module.rows.map(item => {
        return { id: item.id, text: item.spec, itemName: item.itemName, productNumber:item.productNumber, unit: item.unit};
    }), 10);

    function oriProductFormatter(result) {
        return '<span title="'+"品名："+ result.itemName + " | " +"单位："+ result.unit + " | " + "产品号：" + result.productNumber +'">' + result.text +'</span>';
    }

    // 初始化编辑下拉框
    initSelect($alterOriginalProductSelect, "请输入原始成品规格", oriProductFormatter, "/original-information-of-finished-product/getOriginalProduct", 1000, params => {
        return { offset: params.page ? 10 * (params.page - 1) : 0, limit: 10, spec: params.term };
    }, result => result.module.rows.map(item => {
        return { id: item.id, text: item.spec, itemName: item.itemName, productNumber:item.productNumber, unit: item.unit};
    }), 10);

    // 初始化数据信息
    function init() {
        getServerPaging($table, "/shelf-life-setting/getProductExpiryDateSet", params => {
            return { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC" };
        });
    }

</script>

<script>
    /** 页面逻辑 */
    // 原始成品下拉框改变
    let $txt_expiryDate = $("#txt_expiry_date");
    function originalProductSelectChange() {
        setInputSuccess($originalProductSelect);
        setInputError($txt_expiryDate);
        $txt_expiryDate.val("");
    }

    // 原始成品编辑下拉框改变
    let $alter_expiryDate = $("#alter_expiry_date");
    function alterOriginalProductSelectChange() {
        setInputSuccess($alterOriginalProductSelect);
        setInputError($alter_expiryDate);
        $alter_expiryDate.val("");
    }

    // add警告日期输入框改变
    function addExpiryDateInputChange() {
        if (0 === $originalProductSelect.select2('data').length) {
            swal("操作提示", "请先输入原始成品", "info");
            $txt_expiryDate.val("");
            return;
        }
        if ($txt_expiryDate.val() < 0) {
            swal("操作提示", "告警日期需为正数", "info");
            setInputError($txt_expiryDate);
            return;
        }
        "" === $txt_expiryDate.val() ? setInputError($txt_expiryDate) : setInputSuccess($txt_expiryDate);
    }

    // alter警告日期输入框改变
    function alterExpiryDateInputChange() {
        if ($alter_expiryDate.val() < 0) {
            swal("操作提示", "告警日期需为正数", "info");
            setInputError($alter_expiryDate);
            return;
        }
        "" === $alter_expiryDate.val() ? setInputError($alter_expiryDate) : setInputSuccess($alter_expiryDate);
    }

</script>

<script>
    /** 功能 */
    // 添加信息
    function addMsg() {
        if (0 !== $originalProductSelect.select2('data').length) {
            let temp = {
                originalProductId: $originalProductSelect.select2('data')[0].id,
                expiryDate: $txt_expiryDate.val(),
                remark: $("#txt_remark").val()
            };
            if ("" === temp.originalProductId || "" === temp.expiryDate) {
                swal("操作提示", "请输入必输入项", "info");
            } else {
                parameterPostRequest("/shelf-life-setting/insert", temp, () => {
                    $('#addModal').modal('hide');
                    swal("正确", "添加成功", "success");
                    init();
                });
            }
        } else {
            swal("操作提示", "请输入必输入项", "info");
        }
    }

    // 编辑信息
    // alter记录id
    let alterId;
    function initAlter(index) {
        let rows = $table.bootstrapTable('getData');
        $alterOriginalProductSelect.html('<option value="' + rows[index].originalProductId + '">' + rows[index].spec + '</option>');
        $alter_expiryDate.val(rows[index].expiryDate).trigger("change");
        $("#alter_remark").val(rows[index].remark);
        alterId = rows[index].id;
    }
    function alter() {
        if (0 !== $alterOriginalProductSelect.select2('data').length) {
            let data = {
                id: alterId,
                originalProductId: $alterOriginalProductSelect.select2('data')[0].id,
                expiryDate: $alter_expiryDate.val(),
                remark: $("#alter_remark").val()
            };
            if ("" === data.originalProductId || "" === data.expiryDate) {
                swal("操作提示", "请输入必输入项", "info");
            } else {
                parameterPostRequest("/shelf-life-setting/updateExpiryDateSet", data, () => {
                    $('#alterModal').modal('hide');
                    swal("正确", "编辑成功", "success");
                    init();
                });
            }
        } else {
            swal("操作提示", "请输入必输入项", "info");
        }
    }

    // 过滤
    function filter() {
        let data = {
            itemName: $("#txt_search_item_name").val(),
            productNumber: $("#txt_search_product_number").val(),
            spec: $("#txt_search_spec").val()
        };
        if ("" === data["itemName"] && "" === data["productNumber"] && "" === data["spec"]) {
            swal("操作提示", "请填写过滤参数", "info");
            return;
        }
        getServerPaging($table, "/shelf-life-setting/getProductExpiryDateSetByConditions", params => {
            let result = { limit: params.limit, offset: params.offset, sort: "create_time", order: "DESC", itemName: data["itemName"],
                productNumber: data["productNumber"], spec: data["spec"]};
            removeEmptyField(result);

            return result;
        });
    }

    // 查看
    function view(index) {
        let rows = $table.bootstrapTable('getData');
        $("#td_item_name").text(rows[index].itemName);
        $("#td_spec").text(rows[index].spec);
        $("#td_product_number").text(rows[index].productNumber);
        $("#td_unit").text(rows[index].unit);
        $("#td_expiry_date").text(rows[index].expiryDate + ' 天');
        $("#td_remark").text(rows[index].remark);
    }

    // 删除
    function deleteAll(index) {
        dialog("确定删除吗？", () => {
            let data = { "id": $table.bootstrapTable('getData')[index].id };
            parameterPostRequest("/shelf-life-setting/delete", data, () => {
                swal("正确", "删除成功", "success");
                init();
            });
        });
    }

</script>

</body>

</html>